$(function () {
    //添加浮动导航
    var side = document.createElement("ul");
    var style = document.createElement("style");
    var body = document.body;
    side.className = "nav flex-column d-none d-sm-block fixed-top bg-info ";
    side.id = "page_side";
    body.appendChild(side);
    document.head.appendChild(style);
    //生成导航
    var cards = document.querySelectorAll(".card");
    var dom = `<li class="nav-item">
                <a class='btn btn-link tab' href="javascript:;" >tab</a>
                </li>`;
    for (var i = 0; i < cards.length; i++) {
        //nav
        var obj = cards[i];
        obj.id = "card_" + i;
        var title = obj.querySelector("h5").innerHTML;
        if (title) {
            dom += `<li class="nav-item">
                        <a class="nav-link" href="#${obj.id}">${title}</a>
                    </li>`
        }
        //打开iframe窗口
        var iframe = obj.querySelector("iframe");
        if(iframe){
            var a = document.createElement('a');
            a.href = iframe.src;
            a.className = "open-iframe";
            a.target = "_blank";
            a.innerText = "窗口打开》"
            obj.querySelector("h5").appendChild(a);
            
        }
    }
    side.innerHTML = dom;
    //收缩nav
    side.querySelector(".tab").addEventListener("click",function(){
        side.classList.toggle("active");
    },false)
    //模块
    body.dataset.spy = "scroll";
    //对象
    body.dataset.target = "#page_side";
    //距离上边距
    body.dataset.offset = "0";
    style.innerHTML  =`
        #page_side {
            top:20%;
            width:120px;
            left:auto;
            right:0;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
    
        #page_side.active{
            transform: translate3d(70%,0,0);
            -webkit-transform: translate3d(70%,0,0);
        }
        #page_side a{
            color:#f33;
            overflow: hidden;  
            white-space: nowrap;  
            text-overflow: ellipsis; 
        }
        #page_side a:not(.active){
            color:#fff;
        }
        .open-iframe{
            margin-top:5px;
            float:right;
            font-size:12px;
        }
    `
    

   
    

})